<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
		</style>
		<script src="../js/angular/angular.min.js"></script>
		<script src="../js/angular/angular-resource.js"></script>
		<script src="../js/angular/common.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/service/messageService.js"></script>
	</head>

	<body ng-app="mainApp" ng-controller="messageTalkListCtrl" >
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">{{msgComeFrom}}</h1>
		</header>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron" >
					<li class="mui-table-view-cell" ng-repeat="msg in messageTalkList" >
						<a ng-if="userId==msg.publishUser" href="#" style="text-align: right;">{{msg.content}}:{{msg.publishUserName}}</a>
						<a ng-if="userId!=msg.publishUser" href="#" style="text-align: left;">{{msg.publishUserName}}:{{msg.content}}  </a>
					</li>
				</ul>
			</div>
		</div>
		<script>
			
			
			mainApp.controller('messageTalkListCtrl', function($scope, $http,messageService) {
				
				
				
				
				mui.plusReady(function(){
					
					
				    var self = plus.webview.currentWebview();
				    var token=self.token;
				    $scope.msgComeFrom=self.realName;
				    var users = JSON.parse(localStorage.getItem('$users') || '[]');
					users.some(function(user) {
						$scope.userId=user.id;
					});
					//初始化列表数据
					if($scope.userId!=undefined){
						getList(token);
					}
					
					
					mui.init({ 
					swipeBack: false,
					pullRefresh: {
						container: '#pullrefresh',
						down : {
						      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
						      height:'50px',//可选,默认50px.下拉刷新控件的高度,
						      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
						      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
						      auto: false,//可选,默认false.首次加载自动上拉刷新一次
						      callback :pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						},
						up: {
							/*contentrefresh: '正在加载...',
							callback: pullupRefresh*/
						}
					}
					});
					(function($) {
						$.init({
							swipeBack:true //启用右滑关闭功能
						});
						$(".mui-scroll-wrapper").scroll({
							bounce: false,//滚动条是否有弹力默认是true
							indicators: false, //是否显示滚动条,默认是true
						});
					})(mui);
					/**
					 * 下拉刷新具体业务实现
					 */
					function pulldownRefresh() {
						setTimeout(function() {
							getList(token);
							mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
						}, 1000);
					}
					var count = 0;
					/**
					 * 上拉加载具体业务实现
					 */
					function pullupRefresh() {
						setTimeout(function() {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
							var table = document.body.querySelector('.mui-table-view');
							var cells = document.body.querySelectorAll('.mui-table-view-cell');
							for (var i = cells.length, len = i + 20; i < len; i++) {
								var li = document.createElement('li');
								li.className = 'mui-table-view-cell';
								li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
								table.appendChild(li);
							}
						}, 1000);
					}
					
					
					
				   
				});
				$scope.pageIndex=1;
				$scope.pageSize=3;
				$scope.messageTalkList;
				var getList = function(token){
					
					//请求消息列表数据
					messageService.getMessageTalkList(token,$scope.pageIndex,$scope.pageSize,function(data){
						if($scope.pageIndex==1){
							$scope.messageTalkList = data.data.list;
						}else{
							angular.forEach(data.data.list, function(msg) {
								$scope.messageTalkList.unshift(msg);
							});
						}
						
						updateTalkCount();
						if(data.data.list!=undefined&&data.data.list.length!=0){
							$scope.pageIndex=$scope.pageIndex+1;
						}
						
					}, error);
				};
				var updateTalkCount=function(){
					var target = plus.webview.getWebviewById('webviewMain');
					target.evalJS("changeTalkCount()");//修改底部角标数据
				}
				
				tttt=setInterval(function(){
					messageService.getIfMsg();
				},1000);
				//clearInteval(tttt);
				
				
				
			});

			
			
		</script>
	</body>
</html>